<template>
  <div class="c-ph24">
    <!-- 预约上课 || 上课记录 -->
    <div v-if="faceType == 0 || faceType == 2 || faceType == 3">
      <div class="c-pv20 c-w100 c-br10 c-p" v-for="(item,index) in scheduleList" :key="index" @click="goDetail(item.courseId, item.studentId, (item.purchaseId || item.scid), item.scheduleListId, item.saleCourseId, item.isAllow, item.isSignIn)">
        <div class="c-flex-row c-aligni-center c-p">
          <div class="c-ww210 c-hh140 c-text-hidden c-p" :class="(faceType == 0 && item.statusType == 4) || ((faceType == 2 || faceType == 3) && checkTimeOver(item.endTime)) ? 'c-filter-gray100' : ''">
            <!-- saleCourseId  0 机构课程  非0 面授课-->
            <div class="c-p c-ww210 c-hh140">
              <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(((item.saleCourseId == null || item.saleCourseId == 0) ? item.courseCover : (item.saleCourseCover || item.image)) || require('../../../../public/i/wap/edu/enlist.png'))" />
              <div class="c-pa c-p-b8 c-p-r8 c-br8 c-fs18 c-fc-white c-ph5 c-hh28 c-flex-row c-flex-center c-translucent-balck50">{{item.teachType != 2 ? '线下课' : '线上课'}}</div>
            </div>
            <img class="c-pa c-p-t-1 c-p-l0 c-ww76 c-hh32 c-br-tl16" :src="'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/public/i/wap/edu/' + ((item.courseType == 1 || item.saleCourseType=='体验课')? 'experience' : 'formal') + '.png'" />
          </div>
          <div class="c-ml20 c-flex-column c-w0 c-flex-grow1 c-justify-sb c-hh140">
            <div class="c-text-ellipsis2 c-fs24 c-lh32 c-fw600" :class="(faceType == 2 && checkTimeOver(item.endTime)) || item.statusType == 4 ? 'c-fc-gray' : 'c-fc-xblack'">
              <span v-if="(faceType == 2 || faceType == 3)" class="c-fl c-lh24 c-fc-white c-br8 c-mww60 c-ph8 c-pv4 c-fs18 c-textAlign-c c-mr6" :class="checkTimeOver(item.endTime) ? 'c-bg-ccc' : !checkTimeOver(item.startTime) ? 'c-bg-xblue' : 'c-bg-sorange'">{{checkTimeOver(item.endTime) ? '已结束' : !checkTimeOver(item.startTime) ? '待上课' : '进行中'}}</span>
              {{(item.saleCourseId == null || item.saleCourseId == 0) ? item.courseName : item.saleCourseName}}
            </div>
            <div class="c-fs20 c-lh30 c-fc-gray c-text-ellipsis2" v-if="item.lessonName">{{item.lessonName}}</div>
            <div v-if="item.startTime" class="c-fs20 c-fc-gray">上课时间：{{item.startTime}}</div>
            <div class="c-flex-row c-aligni-center">
              <div class="c-fs20 c-lh30 c-fc-gray c-text-ellipsis1 c-maxw50">学员：{{item.studentName}}</div>
              <div class="c-mh20 c-fs18 c-lh20" v-if="item.teacherName">|</div>
              <div v-if="item.teacherName" class="c-fs20 c-lh30 c-fc-gray c-text-ellipsis1 c-maxw50">老师：{{item.teacherName}}</div>
            </div>
          </div>
        </div>
        <div class="c-bg-sgray c-flex-row c-aligni-center c-justify-sb c-ph16 c-pv16 c-br16 c-mt20">
          <div class="c-flex-grow1 c-w0 c-text-ellipsis1 c-fs22 c-fc-sblack">校区：{{item.schoolName || '--'}}</div>
          <!-- statusType 1进行中 2未开始(上课开始时间大于当前时间,是否预约需要根据reservationId>0是预约过) 3可预约 4已结束 -->
          <!-- 这边只需要展示 可预约（预约上课）、已预约、已结束 -->
          <div v-if="faceType == 0 && item.statusType == 3 && !item.reservationId && !checkTimeOver(item.endTime)" class="c-flex-shrink0 c-flex-row c-flex-center c-fc-white c-fs22 c-hh44 c-ww132 c-br30 c-ml20" :class="item.unAppointNum > 0 ? 'theme-bg' : 'c-bg-ccc'" @click.stop="appointmentCoursePopup(item, index)">{{item.unAppointNum > 0 ? '预约上课' : '名额已满'}}</div>
          <div v-else-if="faceType == 0 && item.reservationId > 0 && !checkTimeOver(item.endTime)" class="c-flex-shrink0 c-flex-row c-flex-center c-fs22 c-hh44 c-ww132 c-br30 c-ml20 theme-fc theme-bd1 c-bg-white">已预约</div>
          <div v-else-if="faceType == 0 && checkTimeOver(item.endTime)" class="c-flex-shrink0 c-flex-row c-flex-center c-fs22 c-hh44 c-ww132 c-br30 c-ml20 c-fc-white c-bg-ccc">已结束</div>
        </div>
      </div>
    </div>
    <!-- 预约上课弹窗 -->
    <open-modal :openModal="openModal" @closeModal="closeModal">
      <div v-if="faceType == 0 && currentAppointmentInfo" class="c-bg-white c-w100 c-pb40 c-ph24 c-br-tl16 c-br-tr16">
        <div class="c-pt48 c-fc-xblack c-text-ellipsis1 c-fs26 c-fw-b">{{currentAppointmentInfo.courseName}}</div>
        <div class="c-pv30 c-w100 c-p">
          <div class="c-flex-row c-aligni-center c-p">
            <div class="c-p c-ww210 c-hh140">
              <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(currentAppointmentInfo.courseCover, require('../../../../public/i/wap/edu/enlist.png'))" />
              <div class="c-pa c-p-b8 c-p-r8 c-br8 c-fs18 c-fc-white c-ph5 c-hh28 c-flex-row c-flex-center c-translucent-balck50">{{currentAppointmentInfo.teachType != 2 ? '线下课' : '线上课'}}</div>
              <img class="c-pa c-p-t-1 c-p-l0 c-ww76 c-hh32 c-br-tl16" :src="'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/public/i/wap/edu/' + (currentAppointmentInfo.saleCourseType == '体验课' ? 'experience' : 'formal') + '.png'" />
            </div>
            <div class="c-fs22 c-ml20 c-flex-column c-w0 c-flex-grow1 c-justify-sb c-hh140">
              <div class="c-lh30 c-fc-xblack c-text-ellipsis1" v-if="currentAppointmentInfo.lessonName">{{currentAppointmentInfo.lessonName}}</div>
              <div class="c-flex-row c-aligni-center">
                <div class=" c-lh30 c-fc-gray c-text-ellipsis1 c-maxw50">学员：{{currentAppointmentInfo.studentName}}</div>
                <div class="c-mh10" v-if="currentAppointmentInfo.teacherName">|</div>
                <div v-if="currentAppointmentInfo.teacherName" class="c-lh30 c-fc-gray c-text-ellipsis1 c-maxw50">老师：{{currentAppointmentInfo.teacherName}}</div>
              </div>
              <div v-if="currentAppointmentInfo.startTime" class="c-lh30 c-fc-gray c-text-ellipsis1">上课时间：{{currentAppointmentInfo.startTime}}</div>
              <div class="c-lh30 c-fc-gray c-text-ellipsis1">预约名额 {{currentAppointmentInfo.unAppointNum+'(剩) '}}/{{' ' + currentAppointmentInfo.appointNum}}(总)</div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sb c-mt30" v-if="currentAppointmentInfo.provinceName" @click.stop="goLocation(currentAppointmentInfo.provinceName + currentAppointmentInfo.cityName + currentAppointmentInfo.areaName + currentAppointmentInfo.details, currentAppointmentInfo.cityName)">
            <div class="c-flex-row c-aligni-center c-text-ellipsis1">
              <div class="c-ww40 c-hh40 c-brp50 c-mr10 c-flex-shrink0">
                <img class="c-w100 c-brp50" :src="$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-04-27/zG06Jg0PC7d7ykps54vpiywTxKpO4yKFbq6MRLaI.png')" alt="">
              </div>
              <div class="c-pl10 c-text-ellipsis1 c-fs22">{{currentAppointmentInfo.provinceName + currentAppointmentInfo.cityName + currentAppointmentInfo.areaName + currentAppointmentInfo.details}}</div>
            </div>
            <span class="iconfont c-fs20">&#xe635;</span>
          </div>
        </div>
        <div class="c-hh70 c-w100 c-flex-row c-justify-sb">
          <div class="c-flex-row c-flex-center c-hh64 c-ww280 theme-bd1 theme-fc c-br40" @click="closeModal"> 取消</div>
          <div class="c-flex-row c-flex-center c-hh64 c-ww280 theme-bg c-fc-white c-br40" @click.stop="goReservation(currentAppointmentInfo.index, currentAppointmentInfo.courseId, currentAppointmentInfo.studentId, currentAppointmentInfo.purchaseId, currentAppointmentInfo.courseType, currentAppointmentInfo.scheduleListId, currentAppointmentInfo.saleCourseId)">预约上课</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import openModal from "@/components/templates/common/openModal.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common";
export default {
  name: "scheduleItem",
  components: {
    openModal,
    CoverImg
  },
  props: {
    faceType: { // 0 预约上课列表 2上课记录 3 预约记录
      type: Number,
      default: 1,
    },
    scheduleList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      openModal: false, // 是否显示弹窗
      currentAppointmentInfo: null, // 当前预约上课的信息
    };
  },
  methods: {
    // 检查是否已过当前时间
    checkTimeOver(time) {
      let diff = new Date().getTime() - new Date(time).getTime();
      return diff > 0 ? true : false;
    },
    // 直接预约
    goReservation(index, courseId, studentId, purchaseId, courseType, scheduleListId, saleCourseId) {
      //未预约
      utilJs.postMethod(global.apiurl + "educationSystem/reservation", { courseId: courseId, studentId: studentId, purchaseId: purchaseId, reserveType: courseType, scheduleListId: scheduleListId, saleCourseId: saleCourseId }, res => {
        if (!!res.reserveSetting) {
          //是否有预约限制
          this.$cjConfirm({
            title: '提示',
            message: `可预约${res.reserveSetting.reserveDay}天内的课程, 课程开始前${res.reserveSetting.reserveTime}小时停止预约`,
            showCancelButton: false,
            clickCloseModal: false
          })
        } else {
          this.$showCjToast({
            text: "预约成功",
          });
          this.scheduleList[index].statusType = 2;
          this.scheduleList[index].reservationId = res.id;
        }
        this.closeModal();
      }, failRes => {
        this.closeModal();
      });
    },
    //日程详情
    goDetail(courseId, studentId, purchaseId, scheduleListId, saleCourseId, isAllow, isSignIn) {
      if (isAllow == -1 && isSignIn == 0) {
        this.$cjConfirm({
          title: '提示',
          message: "已退款,现已无权访问",
          showCancelButton: false,
          clickCloseModal: false
        })
      } else {
        this.$routerGo(this, "push", {
          path: "/edu/scheduleDetail",
          query: {
            courseId,
            studentId,
            scheduleListId: scheduleListId, // 日程id
            isShowAppointment: 2, // 2有预约 和取消预约功能
            orderId: purchaseId,
            saleCourseId
          }
        })
      }
    },
    // 预约弹窗
    appointmentCoursePopup(item, index) {
      if (item.unAppointNum == 0) { // 名额已满
        this.$cjConfirm({
          title: '提示',
          message: `该课程名额已满，停止预约`,
          showCancelButton: false,
          clickCloseModal: false
        })
      } else {
        this.openModal = true;
        this.currentAppointmentInfo = item;
        this.currentAppointmentInfo.index = index
      }
    },
    closeModal() {
      this.openModal = false;
      this.currentAppointmentInfo = null;
    },
    goLocation(address) {
      if (!address) {
        return
      }
      this.$routerGo(this, "push", { path: '/addressLocation', query: { address: address } })
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg-white50 {
  background: rgba(255,255,255,0.5);
}
.bg-black50 {
  background: rgba(0,0,0,0.5);
}
</style>
